<template>
    <div class="view">
        <android-nav-bar :title="title" v-on:back="back"></android-nav-bar>
        <div class="article-wrap">
            <cube-scroll ref="scroll">
                <div class="content" v-html="content">

                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch, Inject} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import HeadImg from "@/components/HeadImg.vue";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class OnlineArticle extends Scene {
        private path: string = "";
        private title: string = "";
        private content: string = "";
        private type: string = "";

        public mounted() {
            this.type = String(this.$route.query.title);
            console.log(this.$route.query.title)
            if(this.type==='terms_of_service'){
                this.title='会员服务及隐私协议';
            }else if(this.type==='fee_standard'){
                this.title='会员升级收费说明';
            }else if(this.type==='platform_introduction'){
                this.title='平台介绍';
            }else if(this.type==='acknowledgement'){
                this.title='鸣谢开发者';
            }else if(this.type==='guide'){
                this.title='使用指南';
            }else{
                this.title='文章阅读';
            }
            this.getArticle();
        }

        private back(): void {
            this.navigateBack();
        }

        private getArticle() {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            Http.get(this.api.getAppInfo, {type:this.type}, {}).then((res) => {
                if (res.code == 1) {
                    loadToast.hide();
                    this.content = res.data.content;
                } else {
                    loadToast = (<any> this).$createToast({
                        time: 2500,
                        type: "error",
                        mask: true,
                        txt: `${res.msg}`,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }
    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        overflow hidden
        background #fff

        .article-wrap
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - 47px - var(--safe-area-inset-top));

            .content
                background #fff;
                padding 15px 10px;

            >>> div, p
                line-height 1.5em;

                strong
                    font-weight 600;

</style>
